<template>
  <div>
    <!-- 标题 -->
    <!-- 菜单 -->
    <el-form :inline="true" class="demo-form-inline" size="mini">
      <el-form-item label="菜单名称：">
        <el-input v-model="menuInfo.menuName" placeholder="请输入菜单名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="menuInfo.status" placeholder="请选择" clearable>
          <el-option
            v-for="item in optionsOne"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单类型：">
        <el-select v-model="menuInfo.menuType" placeholder="请选择" clearable>
          <el-option
            v-for="item in optionsTwo"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="btn-set" icon="el-icon-search" @click="query">
          查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" class="btn-set" icon="el-icon-plus" @click="add">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" class="btn-set" icon="el-icon-delete" @click="delList">
          删除
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 菜单列表 -->
    <el-table
      :data="menulist"
      border
      style="width: 100%"
      size="mini"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column fixed prop="menuId" label="序号" width="50" resizable></el-table-column>
      <el-table-column prop="menuName" label="菜单名称" width="auto"></el-table-column>
      <el-table-column prop="parentId" label="上级菜单" width="auto"></el-table-column>
      <el-table-column prop="menuType" label="菜单类型" width="auto"></el-table-column>
      <el-table-column prop="menuIdentify" label="菜单标识" width="auto"></el-table-column>
      <el-table-column prop="url" label="菜单地址" width="auto"></el-table-column>
      <el-table-column prop="menuIcon" label="图标" width="50">
        <template slot-scope="scope">
          <i :class="scope.row.menuIcon"></i>
        </template>
      </el-table-column>
      <el-table-column prop="sortNumber" label="排序号" width="auto"></el-table-column>
      <el-table-column prop="status" label="状态" width="70">
        <template slot-scope="scope">
          <!-- scope.row 可以取到当前一行的数据 -->
          <!-- {{ scope.row }} -->
          <el-switch v-model="scope.row.status" active-value="1" inactive-value="0"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="add">新增</el-button>
          <el-button size="mini" type="warning" @click="edit(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="menuInfo.currentPage"
        :page-sizes="[10, 15, 20]"
        :page-size="menuInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      ></el-pagination>
    </div>
    <!-- 新增 编辑弹窗 -->
    <el-dialog
      :title="menuForm.menuId ? '修改菜单' : '新增菜单'"
      :visible.sync="dialogMenuVisible"
      width="40%"
      @close="close"
    >
      <el-form :model="menuForm" class="demo-form-inline" ref="menuForm" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="菜单类型:" :label-width="formLabelWidth">
              <template>
                <el-radio v-model="menuForm.menuType" label="目录">目录</el-radio>
                <el-radio v-model="menuForm.menuType" label="菜单">菜单</el-radio>
                <el-radio v-model="menuForm.menuType" label="功能">功能</el-radio>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上级菜单:" :label-width="formLabelWidth" prop="parentId">
              <el-select v-model="menuForm.parentId" placeholder="请选择" class="dialog_ipt">
                <el-option
                  v-for="item in optionsThree"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单名称:" :label-width="formLabelWidth" prop="menuName">
              <el-input
                v-model="menuForm.menuName"
                autocomplete="off"
                class="dialog_ipt"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="菜单标识:"
              :label-width="formLabelWidth"
              v-if="menuForm.menuType !== '目录' && menuForm.menuType !== '菜单'"
            >
              <el-input
                v-model="menuForm.menuIdentify"
                autocomplete="off"
                class="dialog_ipt"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="菜单地址:"
              :label-width="formLabelWidth"
              v-if="menuForm.menuType !== '目录' && menuForm.menuType !== '功能'"
            >
              <el-input v-model="menuForm.url" autocomplete="off" class="dialog_ipt"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图标:" :label-width="formLabelWidth">
              <el-select v-model="menuForm.menuIcon" placeholder="请选择" class="dialog_ipt">
                <el-option
                  v-for="item in optionsFour"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序号:" :label-width="formLabelWidth">
              <el-input
                v-model="menuForm.sortNumber"
                autocomplete="off"
                class="dialog_ipt"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态:" :label-width="formLabelWidth">
              <template>
                <el-radio v-model="menuForm.status" label="1">有效</el-radio>
                <el-radio v-model="menuForm.status" label="0">无效</el-radio>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:" :label-width="formLabelWidth">
              <el-input
                v-model="menuForm.remake"
                type="textarea"
                autocomplete="off"
                class="dialog_ipt"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectMenuAllAPI,
  MenuAddAPI,
  MenudeleteAPI,
  selectMenuIdAPI,
  editMenuAPI
} from '@/api/memuAPI.js'
import { Message, MessageBox } from 'element-ui'
export default {
  name: 'MyUser',
  data() {
    return {
      optionsOne: [
        {
          value: '1',
          label: '有效'
        },
        {
          value: '0',
          label: '无效'
        }
      ],
      optionsTwo: [
        {
          value: 1,
          label: '目录'
        },
        {
          value: 2,
          label: '菜单'
        },
        {
          value: 3,
          label: '功能'
        }
      ],
      // 上级菜单
      optionsThree: [
        { value: 1, label: '管理菜单' },
        { value: 2, label: '用户管理' },
        { value: 3, label: '角色管理' },
        { value: 4, label: '菜单管理' }
      ],
      // 图标
      optionsFour: [
        { value: 'el-icon-user-solid', label: '用户管理图标' },
        { value: 'el-icon-s-order', label: '角色管理图标' },
        { value: 'el-icon-menu', label: '菜单管理图标' },
        { value: 'el-icon-search', label: '查询图标' },
        { value: 'el-icon-edit', label: '修改图标' },
        { value: 'el-icon-plus', label: '新增图标' },
        { value: 'el-icon-delete', label: '删除图标' },
        { value: 'el-icon-s-tools', label: '设置图标' }
      ],
      formLabelWidth: '120px',
      // 弹窗规则
      rules: {
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在二十字符以内', trigger: 'blur' }
        ]
      },
      // 用户列表数据
      menulist: [],
      count: 1,
      // 查询数据
      menuInfo: {
        menuName: '',
        menuType: '',
        status: '',
        currentPage: 1,
        pageSize: 10
      },
      // 编辑数据
      editList: [],
      // 弹窗数据
      menuForm: {
        menuType: '目录',
        parentId: '',
        menuName: '',
        menuIdentify: '',
        url: '',
        menuIcon: '',
        sortNumber: '',
        status: '1',
        remake: ''
      },
      dialogMenuVisible: false,
      // 全选框选中数据
      selectionList: []
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    async getMenuList() {
      const result = await selectMenuAllAPI(this.menuInfo)
      this.menulist = result.list
      this.count = result.total
    },
    // 分页数据条数
    handleSizeChange(val) {
      this.menuInfo.pageSize = val
      this.getMenuList()
    },
    // 分页页码
    handleCurrentChange(val) {
      this.menuInfo.currentPage = val
      this.getMenuList()
    },
    // 选择框数据变化
    handleSelectionChange(val) {
      this.selectionList = val
    },
    // 查询事件
    async query() {
      const result = await selectMenuAllAPI(this.menuInfo)
      this.menulist = result.list
    },
    // 删除事件
    async del(row) {
      try {
        await MessageBox.confirm('您确定删除吗？')
        const result = await MenudeleteAPI([row.menuId])
        if (result.code === '1') {
          Message.success('删除成功')
          this.getMenuList()
        } else {
          Message.error('您没有此权限')
        }
      } catch (err) {
        Message('取消删除')
      }
    },
    // 批量删除事件
    async delList() {
      const arr = []
      this.selectionList.forEach(item => {
        arr.push(item.menuId)
      })
      try {
        await MessageBox.confirm('您确定删除吗？')
        const result = await MenudeleteAPI(arr)
        if (result.code === '1') {
          Message.success('删除成功')
          this.getMenuList()
        } else {
          Message.error('您没有此权限')
        }
      } catch (err) {
        Message('取消删除')
      }
    },
    // 新增事件
    add() {
      this.dialogMenuVisible = true
      this.editList = []
    },
    // 编辑事件
    async edit(row) {
      const result = await selectMenuIdAPI({ menuId: row.menuId })
      this.editList = result
      this.menuForm = JSON.parse(JSON.stringify(row))
      this.dialogMenuVisible = true
    },
    // 新增 编辑弹框确认事件
    btnOk() {
      this.$refs.menuForm.validate(async val => {
        // 编辑菜单事件
        if (this.editList.menuId) {
          if (val) {
            const result = await editMenuAPI(this.menuForm)
            if (result.code === '1') {
              Message.success('修改成功')
              this.close()
              this.getMenuList()
            } else {
              Message.error('您没有此权限')
              this.close()
            }
          }
        }
        //新增菜单事件
        else {
          if (val) {
            const result = await MenuAddAPI(this.menuForm)
            if (result.code === '1') {
              this.close()
              this.getMenuList()
              Message.success('新增成功')
            }
          } else {
            Message.error('您没有此权限')
            this.close()
          }
        }
      })
    },
    // 弹框关闭事件
    close() {
      this.menuForm = {}
      this.dialogMenuVisible = false
      this.$refs.menuForm.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.btn-set {
  margin: 0 5px;
}
.dialog_ipt {
  width: 260px;
}
.el-pagination {
  margin-top: 5px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
</style>
